<template>
  <div class="pdfs">
    <div class="pdfs-list">
      <div v-for="(x, y) in pdfs" :key="y" @click="openPdf(x)">
        <div>
          {{ x }}
        </div>
      </div>
    </div>
    <!-- <vue-office-pdf :src="src" @rendered="rendered"/> -->
  </div>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance()
// import VueOfficePdf from '@vue-office/pdf'
const dir = 'D:/cyc/files/pdfs'
const pdfs = ref([])
onMounted(() => {
  proxy.$system.readDir(dir).then(res => {
    pdfs.value = res
  })
})
function openPdf(x) {
  proxy.$system.openFile(dir + '/' + x)
}
</script>
<style scoped lang="scss">
.pdfs-list {
  display: flex;
  flex-wrap: wrap;

  >div {
    // width: 33%;
    margin: 10px;
    display: flex;
    justify-content: left;
    >div {
      padding: 10px;
      border-radius: 10px;
      cursor: pointer;
      background-color: brown;
    }
  }
}
</style>
